<template>
  <div class="watch1">
    <h1>情况一：使用watch监视的ref定义的基本数据类型的value值变化</h1>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum()">点我sum+1</button>
  </div>
</template>
<script lang="ts" setup>
import { watch, ref } from "vue";
// 数据
let sum = ref(0);
// 方法
function changeSum() {
  sum.value += 1;
}
// 监视，情况一：监视ref定义的基本数据类型的数据
const stopWatchs = watch(sum, (newVal, oldVal) => {
  console.log("sum变化了", newVal, oldVal);
  if (newVal >= 10) {
    stopWatchs();
  }
});
</script>
<style scoped>
.watch1 {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>